<template>
  <div class="btn_list_box" v-permission="config.permissionValue ? config.permissionValue : false">
    <div
      v-if="isPermission"
      :class="config.btnClass"
      class="render-text-btn"
      @click="config.handleClick(data)"
    >
      <span>{{ config.setName ? config.setName(data) : config.name }}</span>
    </div>
  </div>
</template>

<script>

export default {
  name: "Btn",
  props: {
    config: {
      type: Object,
      equired: true,
      default: () => {},
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    isPermission() {
      // 当‘operatePermissionList’ 存在时需要判断
      // 不存在时返回true
      // 当 ‘config.permissionValue’ 不存在时 返回true
      // 都存在时，取值返回
      if(this.data.operatePermissionList) {
        let operatePermissionList = JSON.parse(this.data.operatePermissionList)
        let obj = operatePermissionList.find(e => e.scope === this.config.permissionValue)
        return obj ? obj.operatePermission : true
      } else {
        return true
      }
    }
  }
};
</script>

<style>
.render-text-btn{
  /* text-decoration: underline; */
  color: #165DFF;
  cursor: pointer;
  font-size: 14px;
}
.noOperate {
        color: #333;
        cursor:default;
    }
</style>
